<template></template>
<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import shulin from "./shuling.png";
import yu from "./yu.png";
import { requestAnimationFrame } from "cesium";
export default {
  name: "parent-app",
  data() {
    return {};
  },
  created() {},
  mounted() {
    this.load();
  },
  methods: {
    /** 初始加载 */
    load() {
      // 创建场景对象Scene
      let scene = new THREE.Scene();
      // 显示坐标系
      let axesHelper = new THREE.AxesHelper(200);
      scene.add(axesHelper);
      let group = new THREE.Group();
      // 物体
      let sphereGeometry = new THREE.SphereGeometry(30, 100, 100);
      let meshLambertMaterial1 = new THREE.MeshLambertMaterial({
        color: 0xf3e3a4,
      });
      let mesh1 = new THREE.Mesh(sphereGeometry, meshLambertMaterial1);
      mesh1.name = "球形";

      let boxGeometry = new THREE.BoxGeometry(70, 5, 5);
      let meshLambertMaterial2 = new THREE.MeshLambertMaterial({
        color: 0x5d2c7e,
      });
      let mesh2 = new THREE.Mesh(boxGeometry, meshLambertMaterial2);
      mesh2.name = "立方体";
      mesh2.position.x = 100;
      group.add(mesh1, mesh2);

      scene.add(group);

      // 关键帧
      let times = [-20, 12];
      let values = [-700, 0, 0, 200, 0, 0];
      let posTrack = new THREE.KeyframeTrack("立方体.position", times, values);
      let colorKF = new THREE.KeyframeTrack(
        "球形.material.color",
        [ 0, 10],
        [ 1, 0, 0, 1, 1, 1]
      );
      let scaleTrack = new THREE.KeyframeTrack(
        "球形.scale",
        [ 0, 10],
        [ 3, 3, 3, 3, 1, 2]
      );
      let duration = 20; // 动画播放时间
      let clip = new THREE.AnimationClip("default", duration, [
        posTrack,
        colorKF,
        scaleTrack,
      ]);

      //播放关键帧
      let mixer = new THREE.AnimationMixer(group);
      let AnimationAction = mixer.clipAction(clip);
      AnimationAction.timeScale = 10;  //调节播放速度
      AnimationAction.play();
      // 点光源
      let pointLight = new THREE.PointLight(0xffffff);
      pointLight.position.set(60, 600, 640);
      scene.add(pointLight);
      // 平行光源
      // let directLight = new THREE.DirectionalLight(0xffffff, 1);
      // directLight.position.set(60, 600, 640);
      // scene.add(directLight);
      // 环境光
      let ambientLight = new THREE.AmbientLight(0x444444);
      scene.add(ambientLight);

      //相机
      let width = window.innerWidth;
      let height = window.innerHeight;
      let k = width / height;
      let s = 300;
      // let camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 10000);
      // camera.position.set(850, 800, 800);
      /**透视投影相机对象*/
      let camera = new THREE.PerspectiveCamera(60, width / height, 1, 1000);
      camera.position.set(292, 19, 238);
      camera.lookAt(scene.position);

      let renderer = new THREE.WebGLRenderer();
      renderer.setSize(width, height);
      renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
      document.body.appendChild(renderer.domElement); //body元素中插入canvas对象

      let clock = new THREE.Clock();
      function render() {
        // 执行渲染操作   指定场景、相机作为参数
        renderer.render(scene, camera);
        requestAnimationFrame(render)
        mixer.update(clock.getDelta());
      }
      render();
      /** --------------------鼠标控件对象--------------------- */
      let controls = new OrbitControls(camera, renderer.domElement); //创建控件对象
      controls.addEventListener("change", render); //监听鼠标、键盘事件
    },
  },
};
</script>

